<template>
  <div class="store-shelf">
    <shelf-title
      :title="$t('shelf.title')"
    ></shelf-title>
    <scroll class="shelf-scroll-wrapper"
            :top="0"
            :bottom="scrollBottom"
            @onScroll="onScroll"
            ref="scroll"
    >
      <shelf-search></shelf-search>
      <shelf-list :data="shelfList"></shelf-list>
    </scroll>
    <shelf-footer></shelf-footer>
  </div>
</template>

<script>
import ShelfTitle from '../../components/shelf/ShelfTitle'
import { storeShelfMixin } from '../../utils/mixin'
import Scroll from '../../components/common/Scroll'
import ShelfSearch from '../../components/shelf/ShelfSearch'
import ShelfList from '../../components/shelf/ShelfList'
import ShelfFooter from '../../components/shelf/ShelfFooter'

export default {
  name: 'StoreShelf',
  mixins: [storeShelfMixin],
  components: { ShelfFooter, ShelfList, ShelfSearch, Scroll, ShelfTitle },
  watch: {
    isEditMode (isEditMode) {
      this.scrollBottom = isEditMode ? 48 : 0
      this.$nextTick(() => {
        this.$refs.scroll.refresh() // 由于会有Dom操作，所以不能立即刷新
      })
    }
  },
  data () {
    return {
      scrollBottom: 0
    }
  },
  methods: {
    onScroll (offSetY) {
      this.setOffsetY(offSetY)
    }
  },
  mounted () {
    this.getShelfList()
    // 初始化
    this.setShelfCategory([])
    this.setCurrentType(1)
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .store-shelf
    position: relative
    z-index: 100
    width: 100%
    height: 100%
    background: white
    .shelf-scroll-wrapper
      position: absolute
      top: 0
      left: 0
      z-index: 101
</style>
